<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商家订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff;
        }

        .aui-searchbar-input {
            background-color: #ffffff;
        }

        .aui-bar-nav,
        .aui-searchbar,
        .aui-tab {
            background-color: #E94B41;
        }

        .aui-bar-nav,
        .aui-title,
        .aui-bar {
            min-height: 2.20rem;
        }

        .aui-searchbar-input {
            border-radius: .85rem;
            margin: 0;
            width: 11rem
        }

        .aui-bar-nav .aui-title {
            position: static;
            margin: 0
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff
        }

        .list-item {
            margin: 0 .6rem
        }

        .select-btn {
            width: 3.4rem;
            height: 1.2rem;
            line-height: 1.2rem;
            color: #E94B41;
            background: #fff;
            font-size: .6rem;
            border-radius: .65rem;
            border: none
        }

        .head-tap {
            width: 100%;
            background: #E94B41;
            color: #fff;
            padding: 0 .6rem
        }

        .aui-tab {
            width: calc(100% / 2)
        }

        .aui-tab-item.aui-active {
            color: #fff;
            border-bottom: none;
            font-size: .8rem;
            font-weight: 600
        }

        .aui-tab-item {
            height: 2rem;
            line-height: 2rem;
            color: #fff;
        }

        .head-fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
        }

        .aui-searchbar-input input {
            font-size: .65rem
        }
    </style>
</head>

<body id="app">
    <section class="head-fixed">
        <header class="aui-bar aui-bar-nav flex">
            <div class="" tapmode @click='scan'>
                <img class='img-44' src="../../image/merchant/scan-white.png" alt="">
            </div>
            <div class="aui-title">
                <div class="aui-searchbar" id="search">
                    <div class="aui-searchbar-input aui-border-radius">
                        <i class="aui-iconfont aui-icon-search"></i>
                        <input type="search" placeholder="搜索订单" id="search-input">
                        <div class="aui-searchbar-clear-btn">
                            <i class="aui-iconfont aui-icon-close"></i>
                        </div>
                    </div>
                    <div class="aui-searchbar-btn" tapmode>取消</div>
                </div>
            </div>
        </header>
        <div class="flex-center-between height-40 head-tap">
            <div class="aui-tab">
                <div class="aui-tab-item tapmode aui-active">待提货</div>
                <div class="aui-tab-item tapmode">已完成</div>
            </div>
            <button class='select-btn'>批量提醒</button>
        </div>
    </section>
    <section style="margin:4.2rem 0 3.05rem 0">
        <div class="list-item">
            <div class="height-36 font-12 text-color-6">
                8月2日
            </div>
            <div class='text-color-3 font-14 white-bg-radius' style="padding:0 0.6rem 0.6rem 0.6rem" @click='toOrderDetail'>
                <div class="height-44 flex-justify-between">
                    <div class="flex-align-center">
                        <img class='img-16' src="../../image/merchant/man-red.png" alt="" style="margin-right:0.3rem">
                        <span class="font-semibold">张三(1234567898)</span>
                    </div>
                    <div class="font-12 red-text">待提货</div>
                </div>
                <div class="flex" style="position: relative;padding:0.6rem 0">
                    <img src="../../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
                    <div class="">
                        <div class="font-semibold font-13">
                            轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡
                        </div>
                        <div class="flex-justify-between" style="position: absolute;bottom:0;width:calc(100% - 4.7rem)">
                            <div class="text-color-9 font-13">
                                ×1
                            </div>
                            <div class="font-12">
                                ¥<span class="font-17">25</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btns">
                    <button type="button" name="button">提醒发货</button>
                    <button type="button" name="button">立即核销</button>
                </div>
            </div>
        </div>
    </section>

    <footer class="aui-bar aui-bar-tab">
        <div class="aui-bar-tab-item">
            <img class='bottom-seeting-img' src="../../image/merchant/dingdan_checked.png" alt="">
            <div class="aui-bar-tab-label font-9 red-text">订单</div>
        </div>
        <div class="aui-bar-tab-item" tapmode @click='toMerchantHome'>
            <img class='bottom-seeting-img' src="../../image/main/main_person_unchecked.png" alt="">
            <div class="aui-bar-tab-label font-9  text-color-6">我的</div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">
    apiready = function() {
        var vm = new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                toMerchantHome: function() {
                    api.openFrame({
                        name: 'merchant-home_win',
                        url: 'merchant-home_win.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winWidth,
                            h: api.winHeight

                        },
                        pageParam: {
                            name: 'test'
                        },
                        bounces: true,
                        bgColor: 'rgba(0,0,0,0)',
                        vScrollBarEnabled: true,
                        hScrollBarEnabled: true
                    });

                },
                toOrderDetail: function() {
                    // api.openFrame({
                    //     name: 'order-detail_win',
                    //     url: '../order-detail_win.html',
                    //     rect: {
                    //         x: 0,
                    //         y: 0,
                    //         w: api.winWidth,
                    //         h: api.winHeight
                    //     },
                    //     pageParam: {
                    //         name: 'merchantOrder'
                    //     },
                    //     bounces: true,
                    //     bgColor: 'rgba(0,0,0,0)',
                    //     vScrollBarEnabled: true,
                    //     hScrollBarEnabled: true
                    // });
                    api.openWin({
                        name: 'order-detail_win',
                        url: '../order-detail_win.html',
                        pageParam: {
                            name: 'merchantOrder'
                        }
                    });
                },
                scan: function() {
                    console.log('开始扫码')
                    alert('开始扫码')
                    var FNScanner = api.require('FNScanner');
                    FNScanner.open({
                        autorotation: true
                    }, function(ret, err) {
                        if (ret) {
                            alert(JSON.stringify(ret));
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }
            }
        })

        api.parseTapmode();
    };
</script>

</html>
